<template>
  <div class="box">
    <el-input v-model="orderId" placeholder="工单编号" prefix-icon="el-icon-search" @clear="handleClear" />
    <el-select v-model="orderStatus" placeholder="工单状态">
      <el-option label="待办" value="1" />
      <el-option label="进行" value="2" />
      <el-option label="取消" value="3" />
      <el-option label="完成" value="4" />
    </el-select>
    <el-button type="primary" size="mini" icon="el-icon-search" class="search-btn" @click="searchList">查询</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderId: '',
      orderStatus: ''
    }
  },
  methods: {
    handleClear() {
      this.searchText = ''
    },
    searchList() {
      this.$emit('searchList', this.orderStatus, this.orderId)
    }
  }
}
</script>

<style scoped>
.box {
 width: 100%;
 height: 64px;
 background-color: #fff;
 display: flex;
 justify-content: flex-start; /* 使子项向左靠齐 */
 align-items: center;
 margin-bottom: 20px;
}

.el-input {
 margin-left: 20px;
 width: 240px;
 margin-right: 16px;
}

.el-select {

 width: 120px;
 margin-right: 16px;
}

.search-btn {
 height: 36px;
 text-align: center;
 background-color: #5373e0;
}
</style>
